<template>
    <div class="login container">
        <Header></Header>
        <section>
            <van-form ref="form" @submit="onSubmit">
                <van-field 
                    v-model="tel"
                    type="tel"
                    clearable
                    name="tel"
                    :rules="userTel"
                    placeholder="请输入手机号" />
                <van-field
                    v-model="sms"
                    center
                    clearable
                    placeholder="请输入短信验证码"
                    type="digit"
                    >
                    <template #button>
                        <van-button
                        type="primary"
                        @click="sendCode"
                        :disabled="disabled"
                        native-type="button">
                        {{codeMsg}}
                        </van-button>
                    </template>
                </van-field>
                <div style="margin: 0.4267rem;">
                    <van-button
                    round
                    block
                    type="info"
                    native-type="submit"
                    >登录
                    </van-button>
                </div>
            </van-form>
            <div class="tab">
                <span @click="goUserLogin">密码登录</span>
                <span>快速注册</span>
            </div>
        </section>
        
    </div>
</template>
<script>
export default {
  name: "Login",
  components: {  },
  data() {
    return {
      tel: "",
      sms: "",
      disabled: false,
      codeNum: 6,
      codeMsg: "获取短信验证码",
      userTel: [
        {
          required: true,
          message: "请输入手机号",
          trigger: "onBlur"
        },
        {
          validator: value => {
            return /^1[23456789]\d{9}$/.test(value);
          },
          message: "请输入正确格式的手机号"
        }
      ]
    };
  },
  methods: {
    // 获取短信验证码
    sendCode() {
      // 验证手机号格式是否正确
      if (!this.userTel[1].validator(this.tel)) return;
      // 禁用按钮
      this.disabled = true;
      // 倒计时
      let timer = setInterval(() => {
        --this.codeNum;
        this.codeMsg = `重新发送(${this.codeNum})`;
      }, 1000);
      // 判断什么时候停止定时器
      setInterval(() => {
        clearInterval(timer);
        this.codeNum = 6;
        this.disabled = false;
        this.codeMsg = "获取短信验证码";
      }, 6000);
    }
  }
};
</script>